<template>
  <div class="payApply">
    <div class="hadeList dfsp">
      <div
        class="item size16 sizefw"
        v-for="(k, i) in hadeList"
        :key="i"
        :class="hadeListType == k.type ? 'acitem' : ''"
        @click="SetType(k.type)"
      >
        <div class="item-btn">
          {{ t(k.title) }}
        </div>
      </div>
    </div>
    <div class="content">
      <transition name="el-zoom-in-center">
        <cashDeposit v-show="hadeListType == 1"></cashDeposit>
      </transition>
      <transition name="el-zoom-in-center">
        <withdraw v-show="hadeListType == 2"></withdraw>
      </transition>
      <transition name="el-zoom-in-center">
        <record v-show="hadeListType == 3"></record>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import cashDeposit from './component/cashDeposit.vue'
import withdraw from './component/withdraw.vue'
import record from './component/record.vue'
import { reactive, ref } from 'vue'
const hadeListType = ref(1)
const hadeList = reactive([
  {
    title: 'Cashdeposit',
    type: 1,
  },
  {
    title: 'Withdrawalamount',
    type: 2,
  },
  {
    title: 'Collectionrecords',
    type: 3,
  },
])
const SetType = (id) => {
  hadeListType.value = id
}
</script>

<style scoped lang="scss">
@import '../../style/scss/payApply';
</style>
